
<template>
  <div id="songrank">
    <h2>新歌首发</h2>
    <ul class="location-tab">
      <li
        v-for="(item, index) in location"
        :key="index"
        @click="tab(index)"
      >
        {{ item.name }}
        <div :class="{ arr: item.isArr }" />
      </li>
    </ul>
    <ul class="song-list">
      <li
        v-for="(item, index) in display"
        :key="index"
      >
        <!-- <div v-bind:src="item.imgSrc"></div> -->
        <img
          :src="item.imgSrc"
          alt
        >
        <p>{{ item.songName }}</p>
        <p>{{ item.singerName }}</p>
        <span>{{ item.time }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data: () => ({
    msg: 'msg',
    seen: true,
    location: [
      {
        name: '内地',
        isArr: false,
      },
      {
        name: '港台',
        isArr: false,
      },
      {
        name: '欧美',
        isArr: false,
      },
      {
        name: '日本',
        isArr: false,
      },
      {
        name: '韩国',
        isArr: false,
      },
    ],
    display: [],
    inside: [
      {
        imgSrc: require('../assets/img/red.png'),
        songName: '如初',
        singerName: '李玉刚',
        time: '04:36',
      },
      {
        imgSrc: require('../assets/img/red.png'),
        songName: '如初',
        singerName: '李玉刚',
        time: '04:36',
      },
      {
        imgSrc: require('../assets/img/red.png'),
        songName: '如初',
        singerName: '李玉刚',
        time: '04:36',
      },
      {
        imgSrc: require('../assets/img/red.png'),
        songName: '如初',
        singerName: '李玉刚',
        time: '04:36',
      },
      {
        imgSrc: require('../assets/img/red.png'),
        songName: '如初',
        singerName: '李玉刚',
        time: '04:36',
      },
      {
        imgSrc: require('../assets/img/red.png'),
        songName: '如初',
        singerName: '李玉刚',
        time: '04:36',
      },
      {
        imgSrc: require('../assets/img/red.png'),
        songName: '如初',
        singerName: '李玉刚',
        time: '04:36',
      },
      {
        imgSrc: require('../assets/img/red.png'),
        songName: '如初',
        singerName: '李玉刚',
        time: '04:36',
      },
      {
        imgSrc: require('../assets/img/red.png'),
        songName: '如初',
        singerName: '李玉刚',
        time: '04:36',
      },
    ],
    gangTai: [
      {
        imgSrc: require('../assets/img/pic.jpg'),
        songName: '你好',
        singerName: '这里是名字',
        time: '05:12',
      },
      {
        imgSrc: require('../assets/img/pic.jpg'),
        songName: '你好',
        singerName: '这里是名字',
        time: '05:12',
      },
      {
        imgSrc: require('../assets/img/pic.jpg'),
        songName: '你好',
        singerName: '这里是名字',
        time: '05:12',
      },
      {
        imgSrc: require('../assets/img/pic.jpg'),
        songName: '你好',
        singerName: '这里是名字',
        time: '05:12',
      },
      {
        imgSrc: require('../assets/img/pic.jpg'),
        songName: '你好',
        singerName: '这里是名字',
        time: '05:12',
      },
      {
        imgSrc: require('../assets/img/pic.jpg'),
        songName: '你好',
        singerName: '这里是名字',
        time: '05:12',
      },
      {
        imgSrc: require('../assets/img/pic.jpg'),
        songName: '你好',
        singerName: '这里是名字',
        time: '05:12',
      },
      {
        imgSrc: require('../assets/img/pic.jpg'),
        songName: '你好',
        singerName: '这里是名字',
        time: '05:12',
      },
      {
        imgSrc: require('../assets/img/pic.jpg'),
        songName: '你好',
        singerName: '这里是名字',
        time: '05:12',
      },
    ],
    outside: [
      {
        imgSrc: require('../assets/img/outside.png'),
        songName: 'hello',
        singerName: 'this is name',
        time: '03:41',
      },
      {
        imgSrc: require('../assets/img/outside.png'),
        songName: 'hello',
        singerName: 'this is name',
        time: '03:41',
      },
      {
        imgSrc: require('../assets/img/outside.png'),
        songName: 'hello',
        singerName: 'this is name',
        time: '03:41',
      },
      {
        imgSrc: require('../assets/img/outside.png'),
        songName: 'hello',
        singerName: 'this is name',
        time: '03:41',
      },
      {
        imgSrc: require('../assets/img/outside.png'),
        songName: 'hello',
        singerName: 'this is name',
        time: '03:41',
      },
      {
        imgSrc: require('../assets/img/outside.png'),
        songName: 'hello',
        singerName: 'this is name',
        time: '03:41',
      },
      {
        imgSrc: require('../assets/img/outside.png'),
        songName: 'hello',
        singerName: 'this is name',
        time: '03:41',
      },
      {
        imgSrc: require('../assets/img/outside.png'),
        songName: 'hello',
        singerName: 'this is name',
        time: '03:41',
      },
      {
        imgSrc: require('../assets/img/outside.png'),
        songName: 'hello',
        singerName: 'this is name',
        time: '03:41',
      },
    ],
  }),
  methods: {
    tab(index) {
      for (let index = 0; index < this.location.length; index++) {
        const element = this.location[index];
        element.isArr = false;
      }
      switch (index) {
        case 0:
          this.display = this.inside;
          this.location[index].isArr = true;
          break;
        case 1:
          this.display = this.gangTai;
          this.location[index].isArr = true;
          break;
        case 2:
          this.display = this.outside;
          this.location[index].isArr = true;
          break;
        case 3:
          this.display = this.gangTai;
          this.location[index].isArr = true;
          break;
        case 4:
          this.display = this.inside;
          this.location[index].isArr = true;
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style>
ul,
li,
a,
p,
body,
html,
div,
button,
textarea {
  padding: 0;
  margin: 0;
  list-style: none;
}

#songrank {
  width: 650px;
  margin: auto;
}

h2 {
  text-align: center;
}

.location-tab {
  width: 250px;
  margin: auto;
}

.location-tab > li {
  float: left;
  text-align: center;
  width: 50px;
  border-bottom: 1px solid black;
}

.song-list {
  width: 650px;
  margin-top: 60px;
}

.song-list > li {
  float: left;
  background-color: antiquewhite;
  width: 200px;
  height: 80px;
  border-top: 1px solid;
  /* border-right: 1px solid; */
  border-color: #f30;
  margin: 2px;
  position: relative;
}

.song-list > li > div {
  height: 70px;
  width: 70px;
  background-color: #f30;
  float: left;
}

.song-list > li > img {
  height: 70px;
  width: 70px;
  background-color: #f30;
  float: left;
}

.song-list > li > p {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  width: 70px;
  float: left;
  margin: 3px 3px;
}

.song-list > li > span {
  float: right;
  color: #999;
}

.arr {
  /* text-align: center; */
  width: 0;
  position: absolute;
  border-width: 8px 24px;
  border-style: solid;
  border-color: transparent transparent #f30;
}
</style>
